<!DOCTYPE html>
<html lang="cn" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>用户登陆</title>
    <script src="axios.min.js"></script>
    <script src="vue.global.js"></script>
</head>
<body>
<div id="app">
    <h3>用户登录</h3>
    邮箱： <input type="text" id="email" name="email" value=""> <br/>
    密码：<input type="text" id="password" name="password" value=""> <br/>
    <button v-on:click="login">登录</button>
</div>
<script>
    //创建app
    const app = {
        data() {
            return {}
        },
        methods: {
            //用户登录
            login: function () {
                console.log("用户开始登录！")

                //异步登录
                axios({
                    method: 'post',
                    url: '/login',
                    data: {
                        email: document.getElementById("email").value,
                        password: document.getElementById("password").value
                    }
                }).then((response) => {
                    if (response.data === 'ok') {
                        alert("登录成功！")
                    } else {
                        alert("登录失败：" + response.data)
                    }
                })

            }

        },
        mounted() {
            console.log("vue启动成功！")

        }
    }

    //启动vue
    Vue.createApp(app).mount("#app")
</script>
</body>
</html>